<template>
    <div class="swiper" v-if="swiper">
        <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
            <van-swipe-item v-for="(item, index) in swiper" :key="index">
                <img :src="item.img" alt="" @click="jumpPathTo(item.comic_id)" />
                图片加载中...
            </van-swipe-item>
            <!-- <van-swipe-item>2</van-swipe-item>
            <van-swipe-item>3</van-swipe-item>
            <van-swipe-item>4</van-swipe-item> -->
        </van-swipe>
    </div>
</template>

<script>
import { indexBanner } from "../request/index";
export default {
    name: "swiper",
    data() {
        return {
            swiper: [],
            res: "",
        };
    },
    methods: {
        getSwiper() {
            indexBanner().then((data) => {
                this.swiper = data.data;
                this.swiper = this.swiper.filter((item) => {
                    return item["jump_type"] != 3;
                });
                this.swiper.map((item) => {
                    item.comic_id = item.jump_value.substr(19, 5);
                });
            });
        },
        jumpPathTo(x) {
            this.$router.push({ path: `/details/${x}`, query: { id: x } });
        },
    },
    created() {
        this.getSwiper();
    },
};
</script>

<style lang="scss" scope>
@import url(../static/style/reset.css);
@import "../static/style/variable.scss";
.swiper {
    margin: $mar-con;
    margin-bottom: 0.4267rem;
    border-radius: 0.2667rem;
    overflow: hidden;
}
.my-swipe .van-swipe-item {
    color: pink;
    font-size: 0.5333rem;
    line-height: 4.5333rem;
    text-align: center;
    background: whitesmoke;
    img {
        width: 100%;
    }
}
.van-swipe-item {
    height: 4.5867rem;
}
</style>
